import React, { PureComponent } from 'react';
import { Table, Button } from 'antd';
import styles from './index.less';

class AdReportTable extends PureComponent {
  render() {
    // const { selectedRowKeys } = this.state;
    // const { data: { content, totalElements, size, number }, loading, loadingIn } = this.props;
    const { data: { content, totalElements, size, number }, loading } = this.props;
    const { seachValues, onShowDetail } = this.props;

    const title = seachValues.adName ? '广告' : (
      seachValues.orderName ? '广告' : (
        seachValues.aderName ? '订单' : '广告'
      )
    );
    const handleButtonClick = (e, record) => {
      onShowDetail(e, record);
    };
    const columns = [
      { title, dataIndex: 'name' },
      { title: '曝光PV', dataIndex: 'exposePV' },
      { title: '曝光UV', dataIndex: 'exposeUV' },
      { title: '点击PV', dataIndex: 'clickPV' },
      { title: '点击UV', dataIndex: 'clickUV' },
      { title: '花费', dataIndex: 'cost', render: (val) => { return val ? val.toFixed(2) : 0; } },
      { title: 'CTR(%)', dataIndex: 'ctr', render: (val) => { return val ? val.toFixed(2) * 100 : 0; } },
      { title: 'CPM', dataIndex: 'cpm', render: (val) => { return val ? val.toFixed(2) : 0; } },
      { title: 'CPC', dataIndex: 'cpc', render: (val) => { return val ? val.toFixed(2) : 0; } },
      {
        title: '操作',
        render: (text, record) => {
          return (
            <Button
              onClick={e => handleButtonClick(e, record)}
            >
                查看明细
            </Button>
          );
        },
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: totalElements,
      pageSize: size,
      current: parseInt(number, 10) + 1 || 1,
    };

    return (
      <div className={styles.standardTable}>
        <Table
          loading={loading}
          rowKey={record => record.id}
          dataSource={content}
          columns={columns}
          pagination={paginationProps}
          onChange={this.handleTableChange}
        />
      </div>
    );
  }
}

export default AdReportTable;
